<template>
  <div class="center">
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand" >{{title}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center" style="min-height: 50px;
    line-height: 50px;">
        <el-col :span="23">
          <div   style="float: left;width:55%;">
            <el-row>
              <el-col style="width: 40px;margin-right: 5px;">
              <h5>搜索 : </h5>
              </el-col>
              <el-col :span="20" class="interviewtrack">
                <el-select size="small" v-model="customername" @change="customerChange" placeholder="请选择客户简称" style="margin-right: 10px;">
                  <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select size="small" v-model="no" @change="noChange" placeholder="请选择需求编号" style="margin-right: 10px;">
                  <el-option v-for="item in noList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <el-select size="small" v-model="times" @change="timesChange" placeholder="请选择面试次数">
                  <el-option v-for="item in typeList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        <div  style="float: right;">
          <el-row type="flex" justify="space-between"  class="btn">
              <el-input
                size="small"
                style="width: 136px;"
                placeholder="请输入内容"
                v-model.trim="inputValue"
                @keyup.enter.native="searchMsg"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  style="cursor: pointer;"
                  @click="searchMsg"
                ></i>
              </el-input>
            <div style="margin-left: 5px;">
              <el-button
                class="perfect"
                @mousedown.native="perfectDown"
                @mouseup.native="perfectUp"
                :class="{'active' : newcolor}"
                size="small"
                @click="perfectSend"
                round
              >完善
              </el-button>
              <el-button
                class="giveUp"
                @mousedown.native="giveUpDown"
                @mouseup.native="giveUpUp"
                :class="{'active2' : newcolor2}"
                size="small"
                @click="giveUpClick"
                round
              >放弃
              </el-button>
              <el-button
                class="wait"
                @mousedown.native="waitDown"
                @mouseup.native="waitUp"
                :class="{'active3' : newcolor3}"
                size="small"
                @click="waitClick"
                round
              >待定
              </el-button>
              <el-button
                class="edit"
                @mousedown.native="editdown"
                @mouseup.native="editup"
                :class="{'active1' : newcolor1}"
                size="small"
                @click="editshow"
                round
              >修改
              </el-button>
            </div>
          </el-row>
        </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            :data="tableData"
            @selection-change="handleSelectionChange"
            :row-key="getRowKey"
            :row-class-name="tableRowClassName"
            class="tableT"
          >
            <el-table-column
              type="selection"
              style="border:1px solid #333"
              :reserve-selection = "true"
              width="55">
            </el-table-column>
            <el-table-column prop="name" width="100" label="姓名"></el-table-column>
            <el-table-column prop="customerName" v-if="postCustomer" label="推送客户"></el-table-column>
            <el-table-column prop="postName" label="推送职位"></el-table-column>
            <el-table-column prop="postLevel" label="职位级别"></el-table-column>
            <el-table-column label="候选人面试时间">
              <template slot-scope="scope">
                <el-tooltip effect="light" :content="scope.row.candidateChangeReason" placement="top" style="margin-right:6px;" v-if="scope.row.candidateChangeReason">
                  <i class="el-icon-info" style="color:#0f98ff;"></i>
                </el-tooltip>
                <span>{{scope.row.candidateTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户面试时间">
              <template slot-scope="scope">
                <el-tooltip effect="light" :content="scope.row.customerChangeReason" placement="top" style="margin-right:6px;" v-if="scope.row.customerChangeReason">
                  <i class="el-icon-info" style="color:#0f98ff;"></i>
                </el-tooltip>
                <span>{{scope.row.customerTime}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="location" width="400" :label="time"></el-table-column>
            <el-table-column prop="interviewerName" label="面试官"></el-table-column>
            <el-table-column prop="interviewerPhone" label="面试官电话"></el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="修改面试时间"
       class="addP"
      :visible.sync="dialogPeopleVisible"
      width="415px"
      :before-close="cancelPeopleEdit"
    >
      <div class="contentR">
        <el-form :model="form" class="formList" :rules="rules" ref="formU" label-position="top">
          <el-form-item label="候选人修改时间" prop="customerTime">
            <el-date-picker
              v-model="form.customerTime"
              type="datetime"
              placeholder="请选择时间"
              :picker-options="pickerOptions0">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="修改原因" prop="editReason">
            <el-input type="textarea" :rows="4" v-model="form.editReason" placeholder="请输入候选人修改时间原因"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="editTimePeoplePost('formU')">确 定</el-button>
        <el-button round @click="cancelPeopleEdit" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="放弃面试"
       class="addP"
      :visible.sync="dialogGiveUpVisible"
      width="415px"
      :before-close="cancelGiveUpEdit"
    >
      <div class="contentR">
        <el-form :model="formG" class="formList" :rules="ruleG" ref="formG" label-position="top">
          <el-form-item label="放弃原因" prop="giveupReason">
            <el-input type="textarea" :rows="4" v-model="formG.giveupReason" placeholder="请输入放弃面试原因"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="editTimeGiveUpPost('formG')">确 定</el-button>
        <el-button round @click="cancelGiveUpEdit" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="待定"
       class="addP"
      :visible.sync="dialogWaitVisible"
      width="415px"
      :before-close="cancelWait"
    >
      <div class="contentR">
        <el-form :model="formW" class="formList" :rules="ruleW" ref="formW" label-position="top">
          <el-form-item label="待定原因" prop="waitReason">
            <el-input type="textarea" :rows="4" v-model="formW.waitReason" placeholder="请输入待定原因"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="editWaitPost('formW')">确 定</el-button>
        <el-button round @click="cancelWait" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="完善面试信息"
       class="addP"
      :visible.sync="dialogPerfectVisible"
      width="415px"
      :before-close="cancelPerfect"
    >
      <div class="contentR">
        <el-form :model="formL" class="formList" :rules="rulesL" ref="formL" label-position="top">
          <el-form-item :label="time" prop="area">
            <el-input type="textarea" :rows="4" v-model="formL.area" placeholder="请输入面试地点"></el-input>
          </el-form-item>
          <el-form-item label="面试官姓名" prop="imployerNames">
            <el-input v-model="formL.imployerNames" placeholder="请输入面试官姓名"></el-input>
          </el-form-item>
          <el-form-item label="面试官电话" prop="phoneNum">
            <el-input v-model="formL.phoneNum" placeholder="请输入面试官电话"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="perfectPost('formL')">确 定</el-button>
        <el-button round @click="cancelPerfect" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="editdialogVisible"
      width="415px"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何简历</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleClose">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="editdialogNoVisible"
      width="415px"
      :before-close="handleNoClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">统一接口人不同!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleNoClose">确 定</el-button>
        <el-button round @click="handleNoClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="givedialogVisible"
      width="415px"
      :before-close="handlegiveClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">请勿重复放弃!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handlegiveClose">确 定</el-button>
        <el-button round @click="handlegiveClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="sendDialogVisible"
      width="415px"
      :before-close="cancel"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">请每次修改一份简历</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="confirm">确 定</el-button>
        <el-button round @click="cancel" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Store from "@/store/modules/tagsView"
import axios from 'axios'
import qs from 'qs'
  export default{
    name: 'telesolicit',
    data(){
      var CheckTel = (rule, value, callback) => {
        if (!value) {
          callback();
        } else if (!Number.isInteger( +value)) {
          callback(new Error('电话号码必须是数字'));
        } else if (value.toString().length != 11) {
          callback(new Error('电话号码必须是11位'));
        } else {
          callback();
        }
      };
      return {
        title:"面试邀约",
        inputValue:"",
        customerList:[],
        postCustomer:true,
        newcolor: false,
        newcolor1: false,
        newcolor2: false,
        newcolor3: false,
        customername:"",
        times:"",
        no:"",
        noList:[],
        time:"一面地点",
        editTime:false,
        editdialogVisible:false,
        sendDialogVisible:false,
        dialogPerfectVisible:false,
        dialogPeopleVisible:false,
        editdialogNoVisible:false,
        dialogGiveUpVisible:false,
        givedialogVisible:false,
        dialogWaitVisible:false,
        texthtml:"",
        maildata:[],
        theme:"",
        themeList:[],
        typeList:[],
        mail:"",
        copymail:[],
        tableData:[],
        pickerOptions0: {
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
         }
        },
        form:{
          customerTime:"",
          editReason:"候选人修改面试时间"
        },
        formG:{
          giveupReason:""
        },
        formW:{
          waitReason:""
        },
        formL:{
          area:"",
          imployerNames:"",
          phoneNum:"",
        },
        multipleSelection: [],
        currentPage: 1,
        pagesize: 15,
        totalcount:0,
        rules:{
          customerTime:[
            {required:true,message: "请输入时间", trigger: "change"}
          ],
          editReason:[
            {required:true,message: "请输入原因", trigger: "blur"}
          ]
        },
        ruleG:{
          giveupReason:[
            {required:true,message: "请输入放弃原因", trigger: "blur"}
          ]
        },
        ruleW:{
          waitReason:[
            {required:true,message: "请输入待定原因", trigger: "blur"}
          ]
        },
        rulesL:{
          area:[
            {required:true,message: "请输入一面地点", trigger: "blur"}
          ],
          phoneNum:[
            {required:false,validator: CheckTel, trigger: "blur"}
          ]
        }
      }
    },
    created(){
      this.success();
      axios.get(this.url + "/telesolicit/getcustomernames")
      .then(res =>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.customerList = res.data.data;
        }
      })
    },
    methods:{
      success(){
        axios.post(this.url + "/telesolicit/selecttelesolicitinfo",{
          type: this.times,
          id: this.customername,
          no: this.no,
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
        .then(res =>{
          this.unlogin(res.data.code);
          if(res.data.code == 200){
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
            for(let i = 0, len = this.tableData.length; i < len;i++){
              if(this.tableData[i].candidateTime == "9999-1-01 00:00"){
                this.tableData[i].candidateTime = "放弃面试"
              }
            }
          }
        })
      },
      searchMsg(){
        this.currentPage = 1;
        this.success();
      },
      //鼠标按下完善按钮
      perfectDown() {
        this.newcolor = true;
      },
      //点击按钮弹起
      perfectUp() {
        this.newcolor = false;
      },
      //鼠标按下修改按钮
      editdown() {
        this.newcolor1 = true;
      },
      //修改按钮弹起
      editup() {
        this.newcolor1 = false;
      },
      // 检查按钮按下
      giveUpDown() {
        this.newcolor2 = true;
      },
      // 检查按钮弹起
      giveUpUp() {
        this.newcolor2 = false;
      },
      // 待定按钮按下
      waitDown() {
        this.newcolor3 = true;
      },
      // 待定按钮弹起
      waitUp() {
        this.newcolor3 = false;
      },
      giveUpClick(){
        if(this.multipleSelection.length == 0){
          this.editdialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }else if(this.multipleSelection.length > 1){
          this.sendDialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }else if(this.multipleSelection[0].candidateTime == "放弃面试"){
          this.givedialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }else {
          this.dialogGiveUpVisible = true;
          document.documentElement.style.overflow = "hidden";
        }
      },
      // 完善按钮点击
      perfectSend(){
        if(this.multipleSelection.length == 0){
          this.editdialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }else if(this.multipleSelection.length > 1){
          this.sendDialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }else {
          this.dialogPerfectVisible = true;
          document.documentElement.style.overflow = "hidden";
        }
      },
      waitClick(){
        if(this.multipleSelection.length == 0){
          this.editdialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }else if(this.multipleSelection.length > 1){
          this.sendDialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }else {
          this.dialogWaitVisible = true;
          document.documentElement.style.overflow = "hidden";
        }
      },
      cancelWait(){
        this.dialogWaitVisible = false;
        document.documentElement.style.overflow = "auto";
        this.$refs.singleTable.clearSelection();
      },
      editWaitPost(formName){
        this.$refs[formName].validate(valid => {
          if(valid){
            axios.post(this.url + "/telesolicit/undeterminedresume",{
              id:this.multipleSelection[0].id,
              reason:this.formW.waitReason
            }).then(res =>{
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.dialogWaitVisible = false;
                document.documentElement.style.overflow='auto';
                this.$refs.singleTable.clearSelection();
                this.$refs.formW.resetFields();
                this.success();
                if(this.times){
                  this.time = this.times + "地点"
                }else{
                  this.time = "一面地点"
                }
              }
            })
          }})
      },
      perfectPost(formName){
        this.$refs[formName].validate(valid => {
          if(valid){
            axios.post(this.url + "/telesolicit/perfecttime",{
              id:this.multipleSelection[0].id,
              location:this.formL.area,
              name:this.formL.imployerNames,
              phone:this.formL.phoneNum
            }).then(res =>{
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.dialogPerfectVisible = false;
                document.documentElement.style.overflow = "hidden";
                this.$refs.singleTable.clearSelection();
                this.success();
                if(this.times){
                  this.time = this.times + "地点"
                }else{
                  this.time = "一面地点"
                }
              }
            })
          }
        })
      },
      cancelPerfect(){
        this.dialogPerfectVisible = false;
        document.documentElement.style.overflow = "auto";
        this.$refs.singleTable.clearSelection();
      },
      // 修改按钮点击
      editshow(){
        if(this.multipleSelection.length == 1){
          this.dialogPeopleVisible = true;
          document.documentElement.style.overflow='hidden';
        } else if(this.multipleSelection.length > 1){
          this.sendDialogVisible = true;
          document.documentElement.style.overflow='hidden';
        }else {
          this.editdialogVisible = true;
          document.documentElement.style.overflow='hidden';
        }
      },
      themeChange(val){
        axios.post(this.url + "/mailreplay/getcontent",{
          sub:val
        }).then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            this.texthtml = res.data.data
          }
        })
      },
      handlegiveClose(){
        this.givedialogVisible = false;
        document.documentElement.style.overflow = "auto"
      },
      // 点击当前行
      handleSelectionChange(val){
        this.multipleSelection = val;
        // 深拷贝
        this.maildata = JSON.parse(JSON.stringify(val));
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.success();
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.success();
      },
      // 修改面试时间对话框确定按钮点击
      editTimePeoplePost(formName){
        this.$refs[formName].validate(valid => {
          if(valid){
            axios.post(this.url + "/telesolicit/hrchangetime",{
              id:this.multipleSelection[0].id,
              time:this.form.customerTime,
              reason:this.form.editReason
            }).then(res =>{
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.dialogPeopleVisible = false;
                document.documentElement.style.overflow='auto';
                this.$refs.singleTable.clearSelection();
                this.$refs.formU.resetFields();
                this.success();
                if(this.times){
                  this.time = this.times + "地点"
                }else{
                  this.time = "一面地点"
                }
              }
            })
          }
        })

      },
      editTimeGiveUpPost(formName){
        this.$refs[formName].validate(valid => {
          if(valid){
            axios.post(this.url + "/telesolicit/giveupresume",{
              id:this.multipleSelection[0].id,
              reason:this.formG.giveupReason
            }).then(res =>{
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.dialogGiveUpVisible = false;
                document.documentElement.style.overflow='auto';
                this.$refs.singleTable.clearSelection();
                this.$refs.formG.resetFields();
                this.currentPage = 1;
                this.success();
                if(this.times){
                  this.time = this.times + "地点"
                }else{
                  this.time = "一面地点"
                }
              }
            })
          }
        })
      },
      // 修改面试时间对话框取消按钮点击
      cancelPeopleEdit(){
        this.dialogPeopleVisible = false;
        document.documentElement.style.overflow='auto';
        this.$refs.singleTable.clearSelection();
      },
      cancelGiveUpEdit(){
        this.dialogGiveUpVisible = false;
        document.documentElement.style.overflow='auto';
        this.$refs.singleTable.clearSelection();
      },
      handleClose(){
        this.editdialogVisible = false;
        document.documentElement.style.overflow='auto';
      },
      confirm(){
        this.sendDialogVisible = false;
        document.documentElement.style.overflow='auto';
      },
      cancel(){
        this.sendDialogVisible = false;
        document.documentElement.style.overflow='auto';
      },
      getRowKey (row) {
        return row.id
      },
      // 选择客户改变
      customerChange(val){
        this.postCustomer = false;
        let name = "";
        for(let i = 0,len = this.customerList.length; i < len; i++){
          if(this.customerList[i].id == val){
            name = this.customerList[i].name
          }
        }
        axios.post(this.url + "/telesolicit/getrequirenoortype",qs.stringify({
          customerName:name
        })).then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            this.noList = res.data.data
          }
        });
        if(this.times && this.no){
          this.currentPage = 1;
          this.success();
        }
      },
      // 一面二面三面切换
      timesChange(){
        if(this.customername && this.no){
          this.currentPage = 1;
          this.success();
        }
      },
      noChange(val){
        this.times = "",
        axios.post(this.url + "/telesolicit/getrequirenoortype",qs.stringify({
          No:val
        })).then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            this.typeList = res.data.data
          }
        })
        if(this.customername && this.times){
          this.currentPage = 1;
          this.success();
        }
      },
      handleNoClose(){
        this.editdialogNoVisible = false;
        document.documentElement.style.overflow="auto";
      },
      tableRowClassName({row, rowIndex}){
        if(row.candidateTime === row.customerTime){
          return ""
        }else if(row.candidateTime !== row.customerTime){
          return "color-row"
        }else{
          return ""
        }
      },

    },
    watch:{
      "inputValue":function(val){
        if(val == ""){
          this.currentPage = 1;
          this.success();
          this.time = "一面地点"
        }
      },
      "times":function(val){
        if(val == "一面" || val == ""){
          this.time = "一面地点"
        }else if(val == "二面"){
          this.time = "二面地点"
        }else{
          this.time = "三面地点"
        }
      },
    }
  }
</script>
<style scoped>
.hand{
  color: #1099ff;
}
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.posttable {
  min-height: 700px;
  background-color: #fff;
}
.active {
    background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
  }
  .active1 {
    background: linear-gradient(to bottom, #1cf1e3 0%, #379b94 100%);
  }

  .active2 {
    background: linear-gradient(to bottom, #ff9600 0%, #d68300 100%);
  }
  .active3 {
    background: linear-gradient(to bottom, #164d9b 0%, #183c6b 100%);
  }
.perfect {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  padding: 7px 15px !important;
}

.perfect:hover {
  color: #fff !important;
}
  .edit {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 7px 15px !important;
  }

  .edit:hover {
    color: #fff !important;
  }

  .giveUp {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
    padding: 7px 15px !important;
  }

  .giveUp:hover {
    color: #fff !important;
  }
  .wait {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #2e5b9a 0%, #304a6c 100%);
    padding: 7px 15px !important;
  }

  .wait:hover {
    color: #fff !important;
  }
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
    .resumeLink {
    cursor: pointer;
    color: #1198ff;
    text-decoration: none;
  }


  .line{
    height:1px;
    background-color:#c8c8c8;
    margin-top:3px;
    margin-bottom:20px;
  }
  .darkline{
    height:1px;
    background-color:#4288c3;
    margin-top:10px;
    margin-bottom:20px;
  }
  .lightLine{
    height:1px;
    background-color:#cccccc;
    margin-top:10px;
    margin-bottom:10px;
  }

  @media screen and (min-width: 600px) and (max-width: 1700px) {
    .dialogBox{
      height:400px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }


  @media screen and (min-width: 1701px) and (max-width: 1920px) {
    .dialogBox{
      height:600px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }
  .tabletitle {
    margin-left: 20px;
    min-height: 50px;
    line-height: 50px;
  }
</style>
